<template>
  <div class="w1200 hospital_detail_page">
    <!-- 面包屑 开始 -->
    <div class="breadcrumb">
      <el-breadcrumb
        class="el_breadcrumb"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          ><nuxt-link to="/home">首页</nuxt-link></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><nuxt-link to="/baike">口腔百科</nuxt-link></el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ baikeInfo.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑 end -->

    <!-- 基础信息 开始 -->
    <div class="baike_info">
      <div class="avatar">
        <li-image
          v-for="(item, index) in baikeInfo.pictures"
          :key="index"
          :src="item"
          class="img"
          :is-preview="true"
        ></li-image>
      </div>
      <div class="info">
        <h2 class="h2">{{ baikeInfo.name }}</h2>
        <div
          class="desc"
          v-html="$formatTextarea(baikeInfo.projectIntroduce)"
        ></div>
      </div>
    </div>
    <!-- 基础信息 end -->

    <!-- 内容 开始 -->
    <div class="content">
      <!-- 左侧内容 开始 -->
      <div class="left_box">
        <!-- 优惠活动 开始 -->
        <div class="activity_box">
          <TabMenus :list="tabbarList" @change="onTabbarChange" />

          <div class="row_box" ref="tabbar_0">
            <div class="row_head">项目简介</div>
            <div class="row_content">
              <div
                class="txt"
                v-html="$formatTextarea(baikeInfo.projectIntroduce)"
              ></div>
              <h3 class="h3">项目优点：</h3>
              <div
                class="txt"
                v-html="$formatTextarea(baikeInfo.projectAdvantage)"
              ></div>
              <h3 class="h3">项目缺点：</h3>
              <div
                class="txt"
                v-html="$formatTextarea(baikeInfo.projectShortcoming)"
              ></div>
              <h3 class="h3">适应人群：</h3>
              <div
                class="txt"
                v-html="$formatTextarea(baikeInfo.applyCrowd)"
              ></div>
              <h3 class="h3">禁忌人群：</h3>
              <div
                class="txt"
                v-html="$formatTextarea(baikeInfo.tabooPeople)"
              ></div>
              <h3 class="h3">参考价格：</h3>
              <div
                class="txt"
                v-html="$formatTextarea(baikeInfo.referencePrice)"
              ></div>
              <h3 class="h3">效果展示：</h3>
              <div class="txt img_list">
                <div
                  class="img_box"
                  v-for="(item, index) in baikeInfo.displayEffect"
                  :key="index"
                >
                  <li-image :src="item" class="img"></li-image>
                </div>
              </div>
            </div>
          </div>

          <div class="row_box" ref="tabbar_1">
            <div class="row_head">治疗说明</div>
            <div class="row_content">
              <div class="cell_tab">
                <div class="tab_tr tab_tr_grey">
                  <span class="th">操作时间</span>
                  <div class="td">{{ baikeInfo.operationTime }}</div>
                </div>
                <div class="tab_tr">
                  <span class="th">效果持续</span>
                  <div class="td">{{ baikeInfo.effectLasts }}</div>
                </div>
                <div class="tab_tr tab_tr_grey">
                  <span class="th">麻醉方式</span>
                  <div class="td">{{ baikeInfo.anestheticMode }}</div>
                </div>
                <div class="tab_tr">
                  <span class="th">治疗周期</span>
                  <div class="td">{{ baikeInfo.treatmentCycle }}</div>
                </div>
                <div class="tab_tr tab_tr_grey">
                  <span class="th">疼痛程度</span>
                  <div class="td">{{ baikeInfo.painDegree }}</div>
                </div>
                <div class="tab_tr">
                  <span class="th">治疗流程</span>
                  <div
                    class="td"
                    v-html="$formatTextarea(baikeInfo.treatmentProcess)"
                  ></div>
                </div>
              </div>
            </div>
          </div>

          <div class="row_box" ref="tabbar_2">
            <div class="row_head">术后护理</div>
            <div class="row_content">
              <div
                class="txt"
                v-html="$formatTextarea(baikeInfo.postoperativeCare)"
              ></div>
            </div>
          </div>

          <div class="row_box" ref="tabbar_3">
            <div class="row_head">相关材料</div>
            <div class="row_content">
              <div class="txt material_list">
                <nuxt-link
                  :to="`/certification/material/${item.id}`"
                  class="cell"
                  v-for="(item, index) in baikeInfo.relMaterials || []"
                  :key="`material_${index}`"
                >
                  <div class="name van-ellipsis">{{ item.materialName }}</div>
                  <i class="el-icon-arrow-right"></i>
                </nuxt-link>
                <!-- <div class="cell" v-for="(item, index) in (baikeInfo.relMaterials || [])"
                                    :key="`material_${index}`" @click="lookMaterial(item)">
                                    <div class="name van-ellipsis">{{ item.materialName }}</div>
                                    <i class="el-icon-arrow-right"></i>
                                </div> -->
              </div>
            </div>
          </div>

          <div class="row_box" ref="tabbar_4">
            <div class="row_head">常见问题</div>
            <div class="row_content">
              <div class="txt material_list question_list">
                <nuxt-link
                  :to="`/question/${item.id}`"
                  class="cell"
                  v-for="(item, index) in questionList"
                  :key="`question_${index}`"
                >
                  <img
                    src="@/assets/images/question/ask.png"
                    class="img"
                    alt=""
                  />
                  <div class="name van-ellipsis">{{ item.question }}</div>
                </nuxt-link>

                <!-- <div class="cell" v-for="(item, index) in questionList" :key="`question_${index}`"
                                    @click="lookQuestion(item)">
                                    <img src="@/assets/images/question/ask.png" class="img" alt="">
                                    <div class="name van-ellipsis">{{ item.question }}</div>
                                </div> -->
              </div>
            </div>
          </div>
        </div>
        <!-- 优惠活动 end -->
      </div>
      <!-- 左侧内容 end -->

      <!-- 右侧内容 开始 -->
      <div class="right_box">
        <!-- 每周精选 开始 -->
        <div class="problem_box">
          <div class="head">每周精选</div>
          <div class="list_box">
            <div
              class="news_cell"
              :class="index == 0 ? 'news_cell_first' : ''"
              v-for="(item, index) in newsList"
              :key="`news_${index}`"
            >
              <div class="img_box" v-if="index == 0">
                <nuxt-link :to="`/news/${item.id}`">
                  <li-image :src="item.photograph" class="img" />
                </nuxt-link>
              </div>
              <div class="cell ellipsis">
                <nuxt-link :to="`/news/${item.id}`">{{
                  item.articleName
                }}</nuxt-link>
              </div>
              <!-- <div class="cell ellipsis">
                
                {{ item.articleName }}
              </div> -->
            </div>
          </div>
        </div>
        <!-- 每周精选 end -->

        <!-- 社区问题 开始 -->
        <div class="problem_box mt20">
          <div class="head">社区问题</div>
          <div class="list_box">
            <ListQuestion
              v-for="(item, index) in answerList"
              :key="`problem_${index}`"
              :info="item"
              :index="index"
            />
          </div>
        </div>
        <!-- 社区问题 end -->
      </div>
      <!-- 右侧内容 end -->
    </div>
    <!-- 内容 end -->
  </div>
</template>
<script>
import TabMenus from "@/components/tabbar/index.vue";
import ListQuestion from "@/components/question/listCell.vue";
import {
  GET_ORALCAVITY_BAIKE_INFO,
  GET_QUESTIONANSWER_SEARCH,
  GET_ARTICLE_SEARCH,
} from "@/http/interface";
export default {
  components: {
    TabMenus,
    ListQuestion,
  },
  data() {
    return {
      tabbarList: [
        { name: "项目介绍", id: 0 },
        { name: "治疗说明", id: 1 },
        { name: "术后护理", id: 2 },
        { name: "常见问题", id: 3 },
        { name: "相关材料", id: 4 },
      ],
      hospitalId: "",
      baikeInfo: {},
      title: "",
      description: "",
      keywords: "",
      questionList: [],
      answerList: [],
      baikeId: "",
    };
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.keywords,
        },
        {
                    name:'mobile-agent',
                    content:"format=html5",
                    url:`https://m.lilikq.com/baike/${this.baikeId}`
                }
      ],
      link: [
        { ref: "canonical", href: `${this.$domain}/baike/${this.baikeId}` },
      ],
    };
  },
  async asyncData({ query, $axios, params }) {
    let _params = { id: params.id };
    let res = await $axios.get(GET_ORALCAVITY_BAIKE_INFO, { params: _params });
    let baikeInfo = res.data || {};

    // 常见问题
    let qParams = { pageNumber: 1, pageSize: 5, projects: baikeInfo.projectId };
    let qes = await $axios.get(GET_QUESTIONANSWER_SEARCH, { params: qParams });
    let obj = qes.data || {};
    let questionList = obj.list || [];

    // 社区问答
    let ses = await $axios.get(GET_QUESTIONANSWER_SEARCH, {
      params: { pageNumber: 1, pageSize: 10 },
    });
    let qbj = ses.data || {};
    let answerList = qbj.list || [];

    // 资讯列表
    let nes = await $axios.get(GET_ARTICLE_SEARCH, {
      params: { pageNumber: 1, pageSize: 10 },
    });
    let nobj = nes.data || {};
    let newsList = nobj.list || [];

    return {
      baikeInfo,
      hospitalId: query.id,
      title: baikeInfo.seoTitle,
      keywords: baikeInfo.seoKeywords,
      description: baikeInfo.seoDescription,
      questionList,
      answerList,
      newsList,
      baikeId: params.id,
    };
  },
  methods: {
    // 动态获取className
    getClassName(index) {
      if (index % 3 == 0) {
        return "";
      }
      if (index % 3 == 1) {
        return "blue";
      }
      if (index % 3 == 2) {
        return "dark_blue";
      }
    },

    // 获取图片列表
    getImages(str) {
      if (!str) {
        return [];
      }
      let list = str.split(",");
      console.log(list);
      return list;
    },

    // 监听菜单点击
    onTabbarChange(e) {
      let _dom = this.$refs["tabbar_" + e];
      if (_dom) {
        _dom.scrollIntoView();
      }
    },

    // 关注
    async attention() {
      let token = this.$cookies.get("token");
      if (!token) {
        this.$router.push({
          path: "/login",
        });
        return false;
      }
      let _status = this.hospital.followedStatus;
      let id = this.hospitalId;
      let params = { id: id };
      let res = await this.$axios.get(FOLLOWED_HOSPITAL_INFO, {
        params: params,
      });
      if (res.code == 200) {
        this.$set(this.hospital, "followedStatus", _status == 1 ? 2 : 1);
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/baike/detail.less";
</style>